<template>
  <div class="room-content">
    <Navbar :appTitle="appTitle" />
    <Search ref="topSearch" style="padding-top: 0.1rem" class="search" placeholder="工单编号|产品名称|工序名称|批次编号" :isAdd="false" :isScreen="true" :isType="true" @onSearch="onSearch"
      @onScreen="onScreen">
    </Search>
    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-item title="提交日期" @open="createdTimeBeginVisible = true" />
      <van-dropdown-checkbox title="计价方式" :key="selecKey" :selectValue="selectValue" :columns="typeList" @comfirm="typeChange">
      </van-dropdown-checkbox>
    </van-dropdown-menu>
    <search-tag ref="SearchTag" @getCategory="getCategory"> </search-tag>
    <!--分页列表 -->
    <div class="listBox">
      <pageList ref="pageList" :checkedShow="checkedShow" :columns="columns" :listUrl="listUrl">
        <div slot="body" slot-scope="{ item, index }">
          <div class="rt-column">
            <div class="rt-row">
              <div class="column">
                <span class="column-t">批次编号：</span>
                <span class="column-c">
                  <span style="color:#1890ff" @click.stop="showBatch(item.batchId)">{{item.batchCode||'--'}}</span>
                </span>
              </div>
              <div class="column">
                <span class="column-t">生产产品：</span>
                <span class="column-c">{{ item.goodCode }} | {{ item.goodName }}</span>
              </div>
              <div class="column">
                <span class="column-t">计价工资合计：</span>
                <span class="column-c">{{ item.amountText }}元</span>
                <span @click.stop="changeContentShow(false, index)" v-if="contentShow == index" class="arrow">收起
                  <van-icon name="arrow-up" />
                </span>
                <span @click.stop="changeContentShow(true, index)" v-else class="arrow">展开
                  <van-icon name="arrow-down" />
                </span>
              </div>
            </div>
          </div>
          <div v-if="contentShow == index" class="showAll" style="
              width: 100vw;
              margin: 0 0 0.15rem -0.15rem;
              padding: 0.15rem 0.32rem;
            ">
            <p class="conts">
              <span class="key">合格品数 | 单价：</span>
              <span class="value">{{
                `${commafy(item.qualifiedAmountText)}${
                  item.reportingUnit
                } | ${commafy(item.qualifiedPriceText)}元/${item.reportingUnit}`
              }}</span>
            </p>
            <p class="conts">
              <span class="key">不合格品数 | 单价：</span>
              <span class="value">{{
                `${commafy(item.notQualifiedAmountText)}${
                  item.reportingUnit
                } | ${commafy(item.notQualifiedPriceText)}元/${item.reportingUnit}`
              }}</span>
            </p>
            <p class="conts" style="margin: 0">
              <span class="key">计价方式：</span>
              <span class="value">{{ item.pricingType }}</span>
            </p>
          </div>
        </div>
      </pageList>
    </div>
    <!--提交开始时间 -->
    <van-popup v-model="createdTimeBeginVisible" position="bottom">
      <van-datetime-picker @confirm="confirmCreatedStartTime" @cancel="cancelCreatedStartTime" type="date" title="提交开始时间" v-model="minDate" />
    </van-popup>
    <!--提交结束时间 -->
    <van-popup v-model="createdTimeEndVisible" position="bottom">
      <van-datetime-picker @confirm="confirmCreatedEndTime" @cancel="cancelCreatedEndTime" type="date" title="提交结束时间" :min-date="createEndMinDate" />
    </van-popup>
    <BatchProductionModal ref="BatchProductionModal"></BatchProductionModal>
  </div>
</template>

<script>
import VanDropdownCheckbox from "@/views/workManagement/defectsDeal/VanDropdownCheckbox";
import Search from "@/components/search";
import SearchTag from "./SearchTag";
import Navbar from "@/components/navBar/navBar_right";
import TabBar from "@/components/TabBar";
import pageList from "@/components/pageList";
import moment from "moment";
import { commafy } from "@/utils/util";
import BatchProductionModal from '@/components/BatchProductionModal'
export default {
  name: "carRoomList",
  components: {
    Navbar,
    TabBar,
    pageList,
    Search,
    SearchTag,
    VanDropdownCheckbox,
    BatchProductionModal
  },
  data() {
    return {
      commafy,
      contentShow: -1,
      // 日期筛选
      createdTimeBeginVisible: false,
      createdTimeEndVisible: false,
      minDate: new Date(),
      createEndMinDate: new Date(),
      createdTimeRead: "",
      // 日期筛选结束
      checkedShow: false, //列表是否支持选择
      listUrl: "/mess/pieceRateExt/queryPieceRateDetailsPageList", //列表接口
      columns: {
        titleKey: "processCode", //标题
        subtitleKey: "processName", //副标题
        labelKey: ["operator", "commitTime"], //标签
      },
      keyword: "",
      dropdownObj: {
        pricingType: "",
      },
      typeList: [
        {
          value: "regular",
          text: "常规计价",
        },
        {
          value: "planned_output",
          text: "计划产量计价",
        },
      ],
      appTitle: "",
      currentEnvironment: "",
      selectValue: [],
      selecKey: 0,
    };
  },
  computed: {},
  beforeRouteLeave(to, from, next) {
    if (this.$refs.SearchTag.showSearchTag) {
      this.appTitle = this.$route.query.navTitle;
      this.$refs.SearchTag.showSearchTag = false;
      next(false);
    } else {
      next();
    }
  },
  created() {
    this.currentEnvironment = localStorage.getItem("currentEnvironment");
    this.appTitle = this.$route.query.navTitle;
  },
  mounted() {
    this.searchQuery();
  },
  methods: {
    showBatch(id) {
      this.$refs.BatchProductionModal.getData(id)
    },
    typeChange(v) {
      this.selectValue = v.split(",");
      this.selectValue = this.selectValue.filter((item) => item);
      this.dropdownObj.pricingType = v;
      this.searchQuery();
      this.selecKey += 1;
    },
    // 控制展开收起
    changeContentShow(v, i) {
      this.contentShow = v ? i : -1;
    },
    // 选择提交开始时间
    confirmCreatedStartTime(date) {
      this.createEndMinDate = date;
      this.dropdownObj.startTime = moment(date)
        .startOf("day")
        .format("YYYY-MM-DD HH:mm:ss");
      this.dropdownObj.endTime = ""; // 切换开始时间后直接置空结束时间重新选择
      this.createdTimeBeginVisible = false;
      this.createdTimeEndVisible = true;
      this.createdTimeRead = moment(date).format("YYYY-MM-DD");
    },
    // 取消提交开始时间
    cancelCreatedStartTime() {
      this.dropdownObj.startTime = "";
      this.dropdownObj.endTime = "";
      this.createdTimeRead = "";
      this.minDate = new Date();
      this.searchQuery();
      this.createdTimeBeginVisible = false;
    },
    // 选择提交结束时间
    confirmCreatedEndTime(date) {
      this.dropdownObj.endTime = moment(date)
        .endOf("day")
        .format("YYYY-MM-DD HH:mm:ss");
      this.createdTimeEndVisible = false;
      this.createdTimeRead =
        this.createdTimeRead + "~" + moment(date).format("YYYY-MM-DD");
      this.searchQuery();
    },
    // 取消提交结束时间
    cancelCreatedEndTime() {
      this.dropdownObj.startTime = "";
      this.dropdownObj.endTime = "";
      this.createdTimeRead = "";
      this.minDate = new Date();
      this.searchQuery();
      this.createdTimeEndVisible = false;
    },
    dropDownChang() {
      this.searchQuery();
    },
    onSearch(v) {
      this.keyword = v;
      this.searchQuery();
    },
    onScreen() {
      this.appTitle = "更多筛选";
      this.keyword = this.$refs.topSearch.value;
      let pramsObj = JSON.parse(JSON.stringify(this.dropdownObj));
      pramsObj.keyword = this.keyword;
      this.$refs.SearchTag.showModal(this.keyword, pramsObj);
    },
    getCategory(sureObj) {
      console.log(sureObj);
      this.appTitle = this.$route.query.navTitle;
      this.keyword = sureObj.keyword;
      this.$refs.topSearch.value = sureObj.keyword;
      this.dropdownObj = JSON.parse(JSON.stringify(sureObj));
      this.selectValue = this.dropdownObj.pricingType
        ? this.dropdownObj.pricingType.split(",")
        : [];
      delete this.dropdownObj.keyword;
      this.searchQuery();
    },
    // 加载列表
    getList() {
      // 传1代表从第一页数据开始
      this.$refs.pageList.onLoad(1);
    },
    // 搜索
    searchQuery() {
      let params = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      let operator = this.$route.query.operator;
      if (operator) {
        params.operator = operator;
      }
      // console.log("这里有啥：", params);
      this.$refs.pageList.searchQuery(params);
    },
    // 重置
    searchReset() {
      this.$refs.pageList.searchReset();
    },
    goSearch() {
      this.$router.push({ path: "/carRoomPlaneSearch" });
    },
  },
};
</script>
<style lang="scss" scoped>
.room-content {
  height: 100vh;
  overflow-y: scroll;
  .serach {
    height: 0.33rem;
    background: #f2f2f6;
    border-radius: 0rem;
    margin-bottom: 0.16rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 0.33rem;
    padding: 0.1rem 0.12rem;
    // border: 1px solid red;
    .placeh {
      font-size: 0.16rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 0.23rem;
    }
    .icon {
      width: 0.15rem;
      height: 0.16rem;
    }
  }
  .serach-content {
    // height: 1.52rem;
    background: #ffffff;
    padding: 0 0.16rem 0.16rem 0.16rem;
    .content {
      display: flex;
      .tapbtn {
        // height: 0.23rem;
        // background: #1890ff;
        background: #f2f2f6;
        border-radius: 0.02rem;
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #888888;
        line-height: 0.23rem;
        margin-right: 0.12rem;
        text-align: center;
        padding: 0.04rem 0.28rem;
        cursor: pointer;
      }
      .active {
        color: #ffffff;
        background: #1890ff;
      }
    }
  }
}
.labelBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0.14rem;
  .labelLeft {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f6fe;
    border-radius: 0.02rem;
    box-sizing: border-box;
    padding: 0.03rem 0.07rem;
    margin-right: 0.05rem;
    font-size: 0.11rem;
  }
  .labelRight {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f6fe;
    border-radius: 0.02rem;
    box-sizing: border-box;
    padding: 0.03rem 0.07rem;
    font-size: 0.11rem;
  }
}
.listBox {
  height: calc(100vh - 1.5rem);
  overflow-y: auto;
}
.dialogContentBox {
  text-align: left;
  margin: 0.1rem 0.19rem;
  color: #191f25;
  font-size: 0.16rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/deep/ .van-dropdown-menu__bar {
  box-shadow: none;
}
.rt-column {
  padding: 0.17rem 0 0 0.17rem;
  .arrow {
    color: #1890ff;
    // float: right;
    // margin-right: -0.05rem;
    // display: block;
    position: absolute;
    right: 0.15rem;
  }
  //  border: 1px solid red;
}
.rt-row {
  margin-bottom: 0.1rem;
  .column {
    width: 100%;
    .column-t {
      font-size: 0.14rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      margin-bottom: 0.03rem;
    }
    .column-c {
      font-size: 0.14rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
    }
  }
}
.showAll {
  background: #f5f8ff;
  width: 100vw;
  margin-left: -0.15rem;
  padding: 0.15rem;
  margin-bottom: 0.15rem;
  .conts {
    display: flex;
    justify-content: space-between;
  }
  .key {
    color: #888888;
  }
  .value {
    flex: 1;
    color: #191f25;
    width: 1.9rem;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>